<template>
  <div :class="plays">
    <!-- 返回按钮 -->
    <div class="out" @click="$router.go(-1)">
      <van-icon name="arrow-left" />
    </div>

    <div class="music-container">
      <span class="musicName van-ellipsis">{{ musicContainer.name }}</span>
      <span class="singerName">{{ songer.name }}</span>
    </div>

    <div class="img">
      <div :class="animations">
        <van-image
          @click="isShowWords = false"
          v-show="isShowWords"
          class="image"
          v-lazy="songurl.picUrl"
          fit="cover"
          round
          :src="songurl.picUrl"
        />
      </div>
    </div>

    <!-- 歌词组件 -->
    <swiper
      :options="swiperOption"
      class="swiper-container"
      ref="mySwiper"
      v-show="!isShowWords"
      @click="isShowWords = true"
    >
      <swiper-slide
        v-for="(songWords, index) in lyricsObjArr"
        :key="index"
        :class="` ${wordsIndex == index ? 'active' : ''}`"
      >
        {{ songWords.words }}
      </swiper-slide>
    </swiper>

    <!-- 播放组件 -->
    <div class="audio">
      <audio ref="audio" muted="muted" :src="musicsUrl.url"></audio>
      <span class="love">
        <van-icon @click="$toast('该功能尚未开发完成')" name="like-o" />
      </span>
      <span class="play-container">
        <van-icon
          ref="audioBtn"
          v-if="isShowPlay"
          class="play-btn"
          name="play-circle-o"
          @click="audioPlay()"
        />
        <van-icon
          @click="audiopause()"
          v-else
          class="pause-btn"
          name="pause-circle-o"
        />
      </span>
      <span class="shoucang">
        <van-icon @click="$toast('该功能尚未开发完成')" name="star-o" />
      </span>
    </div>
  </div>
</template>

<script>
import { getMusicUrl, getMusicContainer, getMusicWords } from "@/api/home";

export default {
  props: {
    playid: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      musicsUrl: [],
      musicContainer: {},
      //歌曲图片
      songurl: {},
      //歌手名字
      songer: {},
      //播放按钮切换
      isShowPlay: true,
      //控制页面背景颜色变换
      plays: {
        play: true,
      },
      animations: {
        animation: false,
        stopAnimation: false,
      },
      //显示转动图片
      isShowWords: true,
      lyricsObjArr: [],
      wordsIndex: 0,
      swiperOption: {
        direction: "vertical",
        slidesPerView: "auto",
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  created() {
    this.loadMusicUrl();
    this.loadMusicContainer();
    this.loadMusicWords();
  },
  mounted() {
    //自动播放
    this.audioHandle();

    this.lyricAuto();
  },
  updated() {
    this.lyricAuto();
  },
  methods: {
    //获取歌曲的播放链接
    async loadMusicUrl() {
      const { data } = await getMusicUrl({
        id: this.playid,
      });
      this.musicsUrl = data.data[0];
    },

    //获取歌曲的详细信息
    async loadMusicContainer() {
      const { data } = await getMusicContainer({
        ids: this.playid,
      });
      const { songs } = data;
      this.musicContainer = songs[0];

      //歌曲图片
      const { al } = songs[0];
      this.songurl = al;

      // // 歌手名字
      const { ar } = songs[0];
      this.songer = ar[0];
    },

    //获取歌词详情
    async loadMusicWords() {
      const { data } = await getMusicWords({
        id: this.playid,
      });
      const words = data.lrc.lyric;
      const regNewLine = /\n/;
      const lineArr = words.split(regNewLine); // 每行歌词的数组
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;

      lineArr.forEach((item) => {
        if (item == "") return;
        const obj = {};
        let time = item.match(regTime).toString().substr(1);
        time = time.substr(0, time.length - 1);
        //分
        var min = time.split(":")[0];
        var sec = time.split(":")[1];
        ///秒
        var ssec = sec.split(".")[0];

        //将时间转化为秒
        var s = Number(min * 60) + Number(ssec);

        obj.words =
          item.split("]")[1].trim() === "" ? "" : item.split("]")[1].trim();
        obj.time = s;
        if (obj.lyric === "") {
          console.log("这一行没有歌词");
        } else {
          this.lyricsObjArr.push(obj);
        }
      });
    },

    // 控制音乐的播放暂停
    audioPlay() {
      let { audio } = this.$refs;
      if (!audio) return;
      audio.play();
      this.isShowPlay = false;
      //控制旋转动画
      this.animations.animation = true;
      this.animations.stopAnimation = false;
      window.clearInterval(this.lyricTimer);
    },
    audiopause() {
      let { audio } = this.$refs;
      if (!audio) return;
      audio.pause();
      this.isShowPlay = true;
      //动画暂停在转到的地方
      this.animations.stopAnimation = true;
    },
    //音乐的完成
    audioComplete() {
      window.clearInterval(this.lyricTimer)
      this.wordsIndex = 0 ;
       this.swiper.slideTo(0,0);
       this.isShowPlay = true
        this.animations.animation = false;

    },

    //自动播放
    audioHandle() {
      this.audioPlay();
      this.animations.animation = true;
    },

    //歌词滚动
    lyricAuto() {
      let { audio } = this.$refs;
      if (!audio) return;
      window.clearInterval(this.lyricTimer);
      this.lyricTimer = setInterval(() => {
        let duration = audio.duration; //获取当前音乐的播放时间
        let currentTime = audio.currentTime; //获取当前已经播放的时间
        if (currentTime >= duration) {
          this.audioComplete(); //控制音乐的停止
          return;
        }
        let n;
        this.lyricsObjArr.find((item, index) => {
          let { time } = item;
          if (time === Math.round(currentTime)) {
            n = index;
            return true;
          }
          return false;
        });
        // 歌词滚动起来
        if (n && n !== this.wordsIndex) {
          this.wordsIndex = n;
          let index = this.wordsIndex - 3;
          index < 0 ? (index = 0) : null;
          this.swiper.slideTo(index, 200);
        }
      }, 100);
    },
  },
};
</script>
<style lang="less" scoped>
.active {
  color: rgb(86, 129, 209) !important;
}
.play {
  height: 100vh;
  position: relative;
  background-color: #74ebd5;
  background-image: linear-gradient(90deg, #74ebd5 0%, #9face6 100%);
  z-index: 999;
 
  .out {
    position: absolute;
    top: 30px;
    left: 10px;
    font-size: 18px;
  }

  .music-container {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 10vh;
    .musicName {
      font-size: 25px;
      color: #fff;
      width: 50vw;
      text-align: center;
 
    }
    .singerName {
      padding-top: 10px;
      color: rgb(83, 82, 82);
      font-size: 15px;
    }
  }
  .img {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 90px;
    box-sizing: border-box;

    .image {
      cursor: pointer;
      border: 5px solid #eee;
      width: 250px;
      height: 250px;

      .van-image__img {
        width: 250px;
        height: 250px;
      }
    }
  }

  .swiper-container {
    margin-top: -45px;
    height: 50vh;
    width: 100vw;
    .swiper-slide {
      height: 40px;
      color: rgb(141, 133, 133);
      font-size: 19px;
      text-align: center;
    }
  }

  .audio {
    position: fixed;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    .love,
    .shoucang,
    .play-container {
      font-size: 60px;
      color: #fff;
      padding: 0 20px;
      line-height: 50px;
    }
  }
}

//旋转动画
@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animation {
  animation: move 10s linear infinite forwards;
}
.stopAnimation {
  animation-play-state: paused;
}
</style>